<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器练习</title>
  <style>
    /* 标签名选择器*/
    h3{
      color: blue;
    }
    /* id选择器*/
    #p1{
      color: red;
    }
    /* 类选择器*/
    .c1{
      color: green;
    }
    /* 分组选择器*/
    input, #p1, .c1{
      background-color: deepskyblue;
    }
    /*优先级：id选择器 > 类选择器 > 标签名选择器 */
    /*#sq{color: red;}*/
    /*.dw{color: green;}*/
    /*p{color: blue;}*/

    /* 通配符选择器 - 任意元素选择器*/
    * {
      /*border：粗细 样式 颜色*/
      border: 1px solid red;
    }

    /*伪类选择器*/
    /*访问过*/
    a:visited{color: grey;}
    /*未访问*/
    a:link{color: orange;}
    /*悬停*/
    a:hover{color: pink;}
    /*点击*/
    a:active{color: green;}
  </style>
</head>
<body>

  <a href="my.css">超链接1</a>
  <a href="01CSS样式.html">超链接2</a>
  <a href="02CSS选择器.html">超链接3</a>
  <a href="https://www.w3school.com.cn/">超链接4</a>

  <input type="text" class="c1">
  <input type="password">
  <p class="c1">刘备</p>
  <p id="p1">曹操</p>
  <p id="sq" class="dw">孙权</p>
  <h3>西游记</h3>
  <h3>水浒传</h3>
  <h4 class="c1">李雷</h4>



</body>
</html>